<template>
  <div class="friend-link">
    <v-container>
      <v-row justify="center">
        <v-col cols="12" md="10" xl="6" lg="8">
          <v-container
            class="white rounded mt-6"
            style="box-shadow: 0 0 10px 1px grey;"
          >
            <v-card>
              <v-card-title>友人帐</v-card-title>
              <v-card-subtitle>随行随伴，感谢有你！</v-card-subtitle>
              <v-card-actions>
                <v-list>
                  <v-row no-gutters>
                    <v-col
                      cols="12"
                      md="4"
                      xl="4"
                      lg="4"
                      v-for="data in friendLinks"
                      :key="data.id"
                    >
                      <v-hover v-slot:default="{ hover: hover }">
                        <v-list-item
                          :href="data.link"
                          target="_blank"
                          :class="{ friendLinkHover: hover }"
                        >
                          <v-list-item-avatar
                            size="60px"
                            style="margin-right: 0"
                          >
                            <v-img :src="data.avatar"></v-img>
                          </v-list-item-avatar>
                          <v-list-item-content
                            style="padding: 10px 0;align-self: normal;"
                          >
                            <v-list-item-title
                              class="font-weight-bold subtitle-1 text-center"
                              >{{ data.name }}</v-list-item-title
                            >
                            <v-list-item-subtitle class="text-center">
                              {{ data.friendDesc }}
                            </v-list-item-subtitle>
                          </v-list-item-content>
                        </v-list-item>
                      </v-hover>
                    </v-col>
                  </v-row>
                </v-list>
              </v-card-actions>
            </v-card>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
    <Footer />
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import { allFriendLink } from "@/api/friendLink";

export default {
  name: "FriendLinks",
  components: { Footer },
  data() {
    return {
      friendLinks: []
    };
  },
  mounted() {
    allFriendLink().then(res => {
      this.friendLinks = res.data.list;
    });
  }
};
</script>

<style scoped lang="scss">
.friend-link,
.v-list {
  width: 100%;
  height: 100%;
}
.container {
  height: 100%;
}
.row {
  min-height: 85%;
}

@keyframes imageRotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes colorScale {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(0.25);
  }
  50% {
    transform: scale(0.5);
  }
  75% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}

.friendLinkHover {
  .v-avatar {
    .v-image {
      animation: imageRotate 0.3s linear;
    }
  }
}
.friendLinkHover:before {
  animation: colorScale 0.3s linear;
  background-color: red;
  border-radius: 5px;
}
</style>
